<template>
  <div v-loading="loading">
    <DetailPanel :dataSource="form" :columns="formItems" :buttons="buttons">
      <template slot="header">
        {{ title }}
      </template>
      <template slot="bindingAct">
        <el-form-item label="绑定活动:">
          <a :href="`${this.form.actId}`">{{ this.form.actName }}</a>
        </el-form-item>
      </template>
    </DetailPanel>
    <div class="panel">
      <div class="panel-header">使用情况</div>
      <TableSearch
        ref="tableSearch"
        :columns="orderColumns"
        :tableData="tableData"
        @handleTableData="handleTableData"
        :pageNameDisplay="false"
      />
    </div>
  </div>
</template>
<script>
import Big from 'big.js'
import DetailPanel from '@/components/DetailPanel'
import formatter, { typeMap } from '@/utils/format'
import {
  selectAndEnergyCardDetail,
  clearAndEnergyCardRestPoint,
} from '@/api/order'
import TableSearch from '@/components/TableSearch'
import dayjs from 'dayjs'

export default {
  name: 'OrderAndEnergyDetail',
  components: { TableSearch, DetailPanel },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
    title() {
      return `和能量券码: ${this.$route.params.id}`
    },
  },
  data() {
    return {
      loading: false,
      loaded: false,
      formItems: [],
      rules: {},
      form: {},
      buttons: [
        {
          label: '余额清零',
          click: this.handleClearAndEnergycard,
          type: 'warning',
          resourceId:
            '/web/order-management/andEnergyCard-management/andEnergyCard-detail/余额清零',
        },
      ],
      orderFormItems: [
        {
          label: '用户手机号',
          value: 'userMobile',
          type: 'detail',
        },
        {
          label: '剩余和能量(点)',
          value: 'restPoint',
          type: 'detail',
        },
        {
          label: '包含和能量(点)',
          value: 'energyPoint',
          type: 'detail',
        },
        {
          label: '过期时间',
          value: 'expireTime',
          type: 'detail',
          formatter: (data) => {
            if (!data.expireTime) return '无限'
            return dayjs(data.expireTime).format('YYYY-MM-DD HH:mm:ss')
          },
        },
        {
          label: '订单时间',
          value: 'createTime',
          type: 'detail',
          formatter: (data) => {
            if (data.createTime) {
              return dayjs(data.createTime).format('YYYY-MM-DD HH:mm:ss')
            }
            return '/'
          },
        },
        {
          label: '售价(元)',
          value: 'price',
          type: 'detail',
          formatter: (data) => {
            return (data.price && new Big(data.price / 100).toFixed(2)) || 0
          },
        },
        {
          label: '价值(元)',
          value: 'value',
          type: 'detail',
          formatter: (data) => {
            return (
              (data.energyPoint &&
                new Big(data.energyPoint / 100).toFixed(2)) ||
              0
            )
          },
        },
        {
          label: '所属代理商',
          value: 'merchantName',
          type: 'detail',
        },
        {
          label: '优惠券抵扣(元)',
          value: 'voucherMoney',
          type: 'text',
          ifRender: (data) => {
            return data.voucherMoney || data.voucherMoney === 0
          },
          formatter: (data) => {
            return new Big(data.voucherMoney / 100).toFixed(2)
          },
        },
        {
          label: '第三方支付金额(元)',
          value: 'paymentAmount',
          type: 'detail',
          formatter: (data) => {
            return (
              (data.paymentAmount &&
                new Big(data.paymentAmount / 100).toFixed(2)) ||
              0
            )
          },
        },
        {
          label: '和能量类型',
          value: 'type',
          type: 'detail',
          formatter: (data) => {
            return typeMap.andEnergyType[data.type]
          },
        },
      ],
      orderRules: {},
      orderColumns: [
        {
          label: '订单号',
          prop: 'consumeBillNum',
          resourceId:
            '/web/order-management/andEnergyCard-management/andEnergyCard-detail/订单号',
        },
        {
          label: '开始充电时间', // to-fixed
          prop: 'chargeStartTime',
          formatter,
          resourceId:
            '/web/order-management/andEnergyCard-management/andEnergyCard-detail/开始充电时间',
        },
        {
          label: '充电时长',
          prop: 'chargeDuration',
          resourceId:
            '/web/order-management/andEnergyCard-management/andEnergyCard-detail/充电时长',
        },
        {
          label: '抵扣和能量(点)',
          prop: 'energyPointConsume',
          resourceId:
            '/web/order-management/andEnergyCard-management/andEnergyCard-detail/抵扣和能量（点）',
        },
      ],
      tableData: {},
    }
  },
  methods: {
    handleClearAndEnergycard() {
      this.$confirm('确定要清零余额吗？', '余额清零', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      }).then(() => {
        clearAndEnergyCardRestPoint({
          andEnergyCardId: this.$route.params.id,
        })
          .then(() => {
            this.$message({
              message: '清零成功',
              showClose: true,
              type: 'success',
            })

            this.$refs.tableSearch.refreshTable()
          })
          .catch((err) => {
            console.log(err)
          })
      })
    },
    handleTableData(params) {
      this.loading = true
      selectAndEnergyCardDetail({
        ...params,
        andEnergyCardId: this.$route.params.id,
      })
        .then((res) => {
          this.form = res
          this.formItems = this.orderFormItems

          this.tableData = {
            list: res?.logs.list,
            totalCount: res?.logs.totalAmount,
          }

          this.loaded = true
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss">
.timecard-deatail-form {
  padding-left: 20px;
  .el-form-item__content {
    span {
      color: #988ca4;
    }
  }
}

.timecard-deatail-clear_card {
  padding-left: 20px;
}
</style>
